Skip to content

Conversation

@BenOsodrac
Copy link
Contributor

@BenOsodrac BenOsodrac commented Feb 25, 2025

Issue number: internal


What is the new behavior?

  • Added new position prop.
  • Based on the prop, a new badge-position css class is added on the host.
  • Removed css rule that prevented the badge to be rendered when empty.
  • Added common and themes styles to support the position prop and new scale size (on ios/md defaults to min-width variable, as size is not yet supported on native themes).
  • Added new tests specific for this new feature and added new screenshots.
  • Support to properly work inside Avatar, Button and TabButton will be added on different tasks (in the meantime the snapshots will appear wrong for these use-cases)

Does this introduce a breaking change?

  • Yes
  • No

Other information

@BenOsodrac BenOsodrac added type: feature request a new feature, enhancement, or improvement package: core @ionic/core package labels Feb 25, 2025
@vercel
Copy link

vercel bot commented Feb 25, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
ionic-framework ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 3, 2025 6:05pm

@github-actions github-actions bot added package: angular @ionic/angular package package: vue @ionic/vue package labels Feb 25, 2025
OS-martacarlos and others added 2 commits February 25, 2025 17:26
Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

Icons inside badges don't have any specific styling.

<!-- Please describe the behavior or changes that are being added by
this PR. -->
According to the design, for the ionic theme, the size of icons inside
badges have specific values. To accommodate those:
- Added new rules for the badge sizes
- Adding a new testing page and screenshot tests

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: Brandy Smith <[email protected]>
@BenOsodrac BenOsodrac marked this pull request as ready for review February 25, 2025 17:55
@BenOsodrac BenOsodrac requested a review from a team as a code owner February 25, 2025 17:55
@BenOsodrac BenOsodrac requested review from OS-pedrolourenco and brandyscarney and removed request for OS-pedrolourenco February 25, 2025 17:55
Copy link
Member

@brandyscarney brandyscarney left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Just the one question I sent you offline & a suggestion for the naming of the class. 👍

Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, minor suggestion but not a blocker

Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Added css on avatar to support the new badge vertical prop on md, ios
and ionic theme
- Added support on ionic theme for different position, according to the
Avatar size.
- There's no figma for md/iOS implementation, so just added for now a
best effort on how it looks.
- re-organized tests and added new screenshots for the avatar use-case.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

- [Badge
hint](https://ionic-framework-git-rou-11628-ionic1.vercel.app/src/components/badge/test/hint?ionic:theme=ionic)
@BenOsodrac BenOsodrac merged commit 517d5b9 into next Mar 3, 2025
47 checks passed
@BenOsodrac BenOsodrac deleted the ROU-11604 branch March 3, 2025 18:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: angular @ionic/angular package package: core @ionic/core package package: vue @ionic/vue package type: feature request a new feature, enhancement, or improvement

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants